.pan_header {
  padding: 0 20px;
  width: 100%;
  height: 56px;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);

  display: flex;
  justify-content: space-between;
  align-items: center;

  .pan_logo {
    img {
      width: 133px;
    }
  }

  .pan_nav {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    & > .pan_nav_item {
      position: relative;
      margin: 0 8px;

      &:nth-of-type(1) {
        & > a {
          color: #ff0000;
        }
      }

      &:nth-of-type(2) {
        & > a {
          color: #0063e5;
        }
      }

      &:nth-of-type(3) {
        & > img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        & > .username {
          font-weight: 700;
          font-size: 12px;
          margin: 0 6px;
        }

        & > a {
          width: 20px;
          height: 20px;
          display: inline-block;
          background: url("./../../../asserts/ic_non_member_v2.png") no-repeat center;
          background-size: cover;
        }
      }

      & > a {
        &:hover {
          opacity: 0.7;
        }

        button {
          &:hover {
            opacity: 0.7;
          }
        }
      }

      &.vip {

        &:nth-of-type(3) {
          & > a {
            background: url("./../../../asserts/ic_member_v2.png") no-repeat center;
            background-size: cover;
          }
        }
      }
    }
  }
}
